<template>
  <div class="side-bar">
    <!-- 新对话按钮 -->
    <div class="new-chat">
      <div v-if="!isHiddenHomeNewChatButton" class="img-bg">
        <div class="new-chat-button" @click="newChatClick()">
          <span>{{ agentMgr.defaultAgent.name }}</span>
        </div>
      </div>
    </div>
    <!-- 我的智能体菜单 -->
    <el-menu
      id="my-model-menu"
      default-active="1"
      :default-openeds="['1']"
      @open="isAgentCollapsed = true"
      @close="isAgentCollapsed = false"
    >
      <el-sub-menu index="1">
        <template #title>
          <div class="menu-title">
            <img src="@/assets/img/menu-my-model.svg" class="title-icon" />
            <span class="menu-title-span">我的智能体</span>
            <img
              :src="getAssetsFile('arrow_up.svg')"
              class="el-icon el-sub-menu-arrow-custom"
              :class="isAgentCollapsed ? '' : 'down'"
            />
          </div>
        </template>

        <el-menu-item
          v-for="(model, index) in models"
          :key="model.id"
          :index="`1-${index + 1}`"
          @click="gotoChatPage(router, model.id)"
        >
          <template #title>
            <div class="menu-item">
              <img
                :src="
                  model.iconUrl
                    ? onlineImagePathWithFileId(model.iconUrl)
                    : getAssetsFile(model.menuIcon || '')
                "
              />
              <span>{{ model.name }}</span>
            </div>
          </template></el-menu-item
        >
      </el-sub-menu>
    </el-menu>
    <!-- 智能体广场入口 -->
    <div>
      <div class="side-menu-main cursor-pointer" @click="toLink">
        <img src="@/assets/img/menu-square-icon.svg" class="title-icon" />
        <span class="menu-title-span">智能体广场</span>
      </div>
    </div>
    <!-- 最近对话历史 -->
    <div class="history-divider">
      <div class="divider-line"></div>
      <span>最近对话</span>
      <div class="divider-line"></div>
    </div>
    <div class="history">
      <div
        class="menu-item"
        v-for="(item, index) in chatHistory"
        :key="index"
        :index="`2-${index + 1}`"
        @click="gotoChatPage(router, item?.agentInfo.id, item.conversionId)"
      >
        <span v-if="item.agentInfo.tag" class="tag">{{ item.agentInfo.tag }}</span>
        <span class="text-ellipsis">{{ item.conversionName }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { onMounted, ref, watch } from 'vue'
import getAssetsFile from '../utils/pub-use'
import { aiAgentStore } from '../stores/ai-agent'
import { isHiddenHomeNewChatButton } from '../utils/config'
import { onlineImagePathWithFileId, gotoChatPage } from '../utils/lib'
import { type AIAgent, type Conversion } from '../utils/interface'
import agentMgr from '../utils/ai-agent'

const router = useRouter()
const agentStore = aiAgentStore()
const isAgentCollapsed = ref(true)
let models = ref([] as AIAgent[])
let chatHistory = ref([] as Conversion[])

models.value = agentStore.myAgents
chatHistory.value = agentStore.conversionHistory
const newChatClick = () => {
  gotoChatPage(router)
}

const toLink = () => {
  router.push({
    name: 'agentSquare'
  })
}

watch(
  () => agentStore.conversionHistory,
  (newVal, oldVal) => {
    console.log('Conversion history changed:', newVal?.length)
    chatHistory.value = newVal
  }
)

watch(
  () => agentStore.myAgents,
  (newVal, oldVal) => {
    // console.log('My Agents changed:', newVal, oldVal)
    models.value = newVal
  }
)

onMounted(() => {})
</script>

<style scoped lang="scss">
.side-bar {
  flex: 0 0 12em;
  order: -1;
  height: 100%;
  width: 280px;
  background-color: transparent;
  display: flex;
  padding: var(--crp-padding-extra-large) var(--crp-padding-base);
  flex-direction: column;
  // background-image: url('@/assets/logo.svg');
  // background-repeat: no-repeat;
  // background-position: bottom 32px center;
  // background-size: 80%;
  .cursor-pointer {
    cursor: pointer;
  }
  .new-chat {
    margin-bottom: var(--crp-margin-base);
  }

  .title-icon {
    width: 24px;
    height: 24px;
    background: linear-gradient(225deg, #a08efd 0%, #6d3afe 100%);
    box-shadow: 0px 2px 8px 0px rgba(128, 89, 255, 0.3);
    border-radius: 4px;
    padding: var(--crp-padding-extra-small);
    margin-left: var(--crp-margin-small);
    margin-right: var(--crp-margin-small);
  }

  .menu-title {
    display: flex;
    align-items: center;
  }

  .menu-title-span {
    font-weight: 500;
    font-size: var(--crp-font-size-medium);
    color: var(--crp-text-color-important);
    line-height: var(--crp-font-size-medium);
  }

  :deep(.el-menu) {
    background-color: transparent;
    border-right: 0;
    --el-menu-sub-item-height: 40px;
    --crp-menu-item-height: 40px;
    --crp-menu-icon-size: 24px;
    --crp-menu-line-height: 24px;

    .el-sub-menu__title {
      height: var(--crp-munu-item-height);
      line-height: var(--crp-menu-line-height);
      padding: var(--crp-padding-extra-small) 0;
      margin-bottom: 2px;
      font-weight: 500;
      &:hover {
        background-color: transparent;
      }
      .title-img {
        width: var(--crp-menu-icon-size);
        height: var(--crp-menu-icon-size);
        border: 1px solid var(--crp-border-color-btn);
        background: var(--crp-bg-color-tag);
        border-radius: var(--crp-border-radius-small);
        margin-right: var(--crp-margin-small);
        padding: var(--crp-padding-extra-small);
      }
    }

    .el-sub-menu__icon-arrow {
      display: none;
      margin-right: -16px;
      font-size: var(--crp-font-size-base);
    }
    .el-sub-menu-arrow-custom {
      margin-right: -16px;
      font-size: var(--crp-font-size-base);
      margin-top: -6px;
      position: absolute;
      right: var(--el-menu-base-level-padding);
      top: 50%;
      transition: transform var(--el-transition-duration);
      width: inherit;
    }
    .down {
      transform: rotateZ(180deg);
    }

    .el-sub-menu .el-menu-item {
      font-size: var(--crp-font-size-small);
      padding: 0;
      height: var(--crp-menu-item-height);
      line-height: var(--crp-menu-line-height);
      margin-bottom: 1px;
      color: var(--crp-text-color-primary);

      .menu-item {
        display: flex;
        width: 100%;
        align-items: center;
        margin-left: var(--crp-margin-large);
        height: var(--crp-menu-item-height);
        border-radius: 4px;
        &:hover {
          background-color: rgba(128, 89, 255, 0.08);
          font-weight: 500;
        }
      }

      &:hover {
        background-color: transparent;
      }

      // &.is-active {
      //   color: var(--crp-colors-primary-base);
      // }

      img {
        width: var(--crp-menu-icon-size);
        height: var(--crp-menu-icon-size);
        border-radius: var(--crp-border-radius-small);
        border: 1px solid var(--crp-border-color-btn);
        margin-right: var(--crp-margin-small);
        margin-left: var(--crp-margin-base);
        background-color: var(--crp-bg-color-tag);
        padding: 4px;
      }
    }
  }

  :deep(.el-divider--horizontal) {
    margin: var(--crp-margin-small) 0;
  }

  .side-menu-main {
    display: flex;
    align-items: center;

    height: 40px;
    border-radius: 4px;
    margin: 4px 0;
    margin-bottom: 20px;
    &:hover {
      background: rgba(128, 89, 255, 0.08);
    }
  }

  .history-divider {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .divider-line {
      height: 1px;
      width: 34.5%;
      border-top: 1px solid var(--crp-border-color);
    }

    span {
      margin-left: var(--crp-margin-middle);
      margin-right: var(--crp-margin-middle);
      font-weight: 400;
      font-size: var(--crp-font-size-small);
      color: var(--crp-text-color-placeholder);
    }
  }

  .history {
    margin-top: var(--crp-margin-small);
    .menu-item {
      padding-left: var(--crp-padding-small);
      padding-right: var(--crp-padding-base);
      display: flex;
      height: 40px;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      border-radius: 4px;
      font-weight: 400;
      font-size: var(--crp-font-size-small);
      color: var(--crp-text-color-primary);
      line-height: 14px;

      span {
        &.tag {
          color: var(--crp-colors-primary-base);
          height: 18px;
          border-radius: 2px;
          border: 1px solid var(--crp-border-color-btn);
          margin-right: var(--crp-margin-extra-small);
          font-weight: 400;
          font-size: 10px;
          line-height: 18px;

          align-items: center;

          box-sizing: border-box;
          display: inline-flex;
          justify-content: center;
          line-height: 1;
          padding: 0 5px;
          vertical-align: middle;
          white-space: nowrap;
        }
      }

      &:hover {
        background-color: rgba(128, 89, 255, 0.08);
        font-weight: 500;
        color: var(--crp-text-color-important);
      }
    }
  }

  .text-ellipsis {
    display: inline-block;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    color: var(--crp-text-color-primary);
    text-overflow: ellipsis;
  }

  .my-model {
    padding: 8px;
    border-bottom: 1px solid var(--el-border-color-darker);
  }

  .img-bg {
    height: 48px;
    background: linear-gradient(225deg, #a08efd 0%, #6d3afe 100%);
    box-shadow: 0px 4px 12px 0px rgba(128, 89, 255, 0.3);
    border-radius: 8px;
  }
  .new-chat-button {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--crp-padding-base);
    padding-right: 0;
    width: 100%;
    background-image: url('@/assets/img/new-chat-button-bg.png');
    background-repeat: no-repeat;
    background-position: center right;
    background-size: 60px 48px;
    height: 48px;

    &:hover {
      background-image: url('@/assets/img/new-chat-button-bg-actived.png');
    }

    span {
      font-weight: 600;
      font-size: var(--crp-font-size-medium);
      color: #ffffff;
      line-height: 14px;
      text-align: left;
    }
  }
}
</style>
